<template>
  <div class="detail">
    <h3>{{ detail.name }}</h3>
    <img :src="detail.coverImg" width="100%" height="220" alt="" />
    <p>{{ detail.price }}</p>
    <van-button type="primary" block @click="addcart(detail._id)"
      >添加购物车</van-button
    >
  </div>
</template>

<script>
import { reqProductsDetail } from "../../api/product";
import { addtocart } from "../../api/cart";
export default {
  data() {
    return {
      detail: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    async loadDetail(id) {
      const result = await reqProductsDetail(id);
      console.log(result);
      this.detail = result;
    },
    // 添加购物车
    async addcart(id) {
      const result = await addtocart({
        product: id,
        quantity: 1,
      });
      console.log(result);
      this.$router.push('/cart')
    },
  },
  created() {
    const id = this.$route.params.id;
    this.loadDetail(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
